<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>门诊退费</title>
    <link href="css/index/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/loginOut.css">
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/payIn.css">
    <script src="lib/js/jquery-1.12.4.js"></script>
    <script src="lib/js/bootstrap.js"></script>
    <script src="js/loginText.js"></script>
</head>

<body>
    <!-- left 侧边栏 start -->
    <header>
        <div class="header_content">
            您好，<span class="actor"></span>！
            <div class="loginOut">
                退出
                <span class="iconfont icon-tuichu"></span>
            </div>
        </div>
    </header>
    <div class="content">
        <div id="left">
            <div class="menu">菜单栏</div>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <!-- todo -->


            </div>
        </div>
        <!-- left 侧边栏 end -->

        <div class="right">
            <div class="header">门诊退费</div>
            <div class="right-content">
                <div class="right-content-content">
                    <!-- 查询 -->
                    <form class="form-inline my-form" style="margin-bottom: 50px" id="myFormSearch">
                        <div style="display: block;" class="form-group line">
                            <label for="exampleInputName2">请输入身份证号：</label>
                            <input type="text" class="form-control" id="searchNumber" placeholder="输入身份证号">
                        </div>
                        <div style="display: block;" class="form-group line">
                            <label for="exampleInputName2">请输入病人姓名：</label>
                            <input type="text" class="form-control" id="searchName" placeholder="输入病人姓名">
                        </div>
                        <div style="display: block;" class="form-group line">
                            <button type="submit" class="btn btn-primary searchButton">查询</button>
                        </div>
                    </form>
                    <!-- 动态显示部分 -->
                    <div class="patient-content">


                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
    <footer>
    </footer>
    <div class="footer_content1">权限管理系统2020</div>


</body>

<!-- 病人信息渲染 -->
<script type="text/template" id="nameAndNumber">
    <table class="table table-hover">
    <thead>
        <tr>
            <th>编 号</th>
            <th>姓 名</th>
            <th>身份证号</th>
            <th>操 作</th>
        </tr>
    </thead>
    <tbody>
        <%for(var i = 0; i < data.length; i++) {%>
        <tr>
            <td><%=i+1%></td>
            <td><%=data[i].name%></td>
            <td><%=data[i].number%></td>
            <td><button class="btn btn-primary nameAndNumber" data-name="<%=data[i].name%>" data-number="<%=data[i].number%>">查看</button></td>
        </tr>
        <%}%>
    </tbody>
</table>
</script>

<!-- 一个账单的渲染 -->
<script type="text/template" id="onePayOut">
    <div class="patient-message">
        <span>姓名：<%=data.name%></span>
        <span>身份证号：<%=data.number%></span>
        <span>年龄：<%=data.age%></span>
        <span>性别：<%=data.sex%></span>
    </div>
    <div style="margin-bottom: 5px; text-align: left;">退费药品信息</div>
    <table class="table table-condensed table-hover">
        <thead>
            <tr>
                <th>编号</th>
                <th>药品名称</th>
                <th>药品代码</th>
                <th>规格</th>
                <th>单价</th>
                <th>单位</th>
                <th>数量</th>
                <th>退费数量</th>
                <th>合计金额</th>
                <th>退费金额</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <%for(var j = 0; j < data.pay[0].pills.length; j++) {%>
            <tr>
                <td><%=j+1%></td>
                <td><%=data.pay[0].pills[j].name%></td>
                <td><%=data.pay[0].pills[j].number%></td>
                <td><%=data.pay[0].pills[j].size%></td>
                <td><%=data.pay[0].pills[j].money%></td>
                <td><%=data.pay[0].pills[j].unit%></td>
                <td><%=data.pay[0].pills[j].num%></td>
                <td>
                    <input class="pillOutNum<%=data.pay[0].pills[j].number%>" type="text" style="width: 40px" data-maxPillNum="<%=data.pay[0].pills[j].num%>">
                </td>
                <td><%=data.pay[0].pills[j].totalMoney%></td>
                <td>
                    <input class="pillOutMoney<%=data.pay[0].pills[j].number%>" type="text" style="width: 40px" data-maxPillMoney="<%=data.pay[0].pills[j].totalMoney%>">
                </td>
                <td><button data-target="<%=data.pay[0].pills[j].number%>" class="btn btn-primary btn-sm btn-payOutPillMoney" data-payBianHao="<%=data.pay[0].payBianHao%>" data-pillNumber="<%=data.pay[0].pills[j].number%>">退费</button></td>
            </tr>
            <%}%>
        </tbody>
    </table>
    <div style="margin-bottom: 5px; text-align: left;">退费项目信息</div>
    <table class="table table-condensed table-hover">
        <thead>
            <tr>
                <th>编号</th>
                <th>项目编号</th>
                <th>项目名称</th>
                <th>单位</th>
                <th>单价</th>
                <th>数量</th>
                <th>退费数量</th>
                <th>合计金额</th>
                <th>退费金额</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <%for(var m = 0; m < data.pay[0].programs.length; m++) {%>
            <tr>
                <td><%=m+1%></td>
                <td><%=data.pay[0].programs[m].number%></td>
                <td><%=data.pay[0].programs[m].name%></td>
                <td><%=data.pay[0].programs[m].unit%></td>
                <td><%=data.pay[0].programs[m].money%></td>
                <td><%=data.pay[0].programs[m].num%></td>
                <td>
                    <input class="programOutNum<%=data.pay[0].programs[m].number%>" type="text" style="width: 40px" data-maxProgramNum="<%=data.pay[0].programs[m].num%>">
                </td>
                <td><%=data.pay[0].programs[m].totalMoney%></td>
                <td>
                    <input class="programOutMoney<%=data.pay[0].programs[m].number%>" type="text" style="width: 40px" data-maxProgramMoney="<%=data.pay[0].programs[m].totalMoney%>">
                </td>
                <td>
                    <button data-target="<%=data.pay[0].programs[m].number%>"class="btn btn-primary btn-sm btn-payOutMoney" data-payBianHao="<%=data.pay[0].payBianHao%>" data-programNumber="<%=data.pay[0].programs[m].number%>" >退费</button>
                </td>
            </tr>
            <%}%>
        </tbody>
    </table>



</script>



<!-- 多个账单渲染 -->
<script type="text/template" id="manyPayOut">

    <div class="patient-message">
        <span>姓名：<%=data.name%></span>
        <span>身份证号：<%=data.number%></span>
        <span>年龄：<%=data.age%></span>
        <span>性别：<%=data.sex%></span>
    </div>
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>账单编号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <%for(var i = 0; i < data.pay.length; i ++) {%>
            <tr>
                <td><%=data.pay[i].payBianHao%></td>
                <td>
                    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal<%=i+1%>">
                        查看账单信息
                    </button>
                    <div class="modal fade" id="myModal<%=i+1%>" tabindex="-1" role="dialog"
                        aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                        <div class="modal-dialog  modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div style="margin-bottom: 5px; text-align: left;">账单信息
                                    </div>
                                </div>
                                <div class="modal-body" style="height: 370px;">
                                    <div style="margin-bottom: 5px; text-align: left;">退费药品信息</div>
                                    <table class="table table-condensed table-hover">
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>药品名称</th>
                                                <th>药品代码</th>
                                                <th>规格</th>
                                                <th>单价</th>
                                                <th>单位</th>
                                                <th>数量</th>
                                                <th>退费数量</th>
                                                <th>合计金额</th>
                                                <th>退费金额</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <%for(var j = 0; j < data.pay[i].pills.length; j++) {%>
                                            <tr>
                                                <td><%=j+1%></td>
                                                <td><%=data.pay[i].pills[j].name%></td>
                                                <td><%=data.pay[i].pills[j].number%></td>
                                                <td><%=data.pay[i].pills[j].size%></td>
                                                <td><%=data.pay[i].pills[j].money%></td>
                                                <td><%=data.pay[i].pills[j].unit%></td>
                                                <td><%=data.pay[i].pills[j].num%></td>
                                                <td>
                                                    <input class="pillOutNum<%=data.pay[i].pills[j].number%>" type="text" style="width: 40px" data-maxPillNum="<%=data.pay[i].pills[j].num%>">
                                                </td>
                                                <td><%=data.pay[i].pills[j].totalMoney%></td>
                                                <td>
                                                    <input class="pillOutMoney<%=data.pay[i].pills[j].number%>" type="text" style="width: 40px" data-maxPillMoney="<%=data.pay[i].pills[j].totalMoney%>">
                                                </td>
                                                <td><button data-target="<%=data.pay[i].pills[j].number%>" class="btn btn-primary btn-sm btn-payOutPillMoney" data-payBianHao="<%=data.pay[i].payBianHao%>" data-pillNumber="<%=data.pay[i].pills[j].number%>">退费</button></td>
                                            </tr>
                                            <%}%>
                                        </tbody>
                                    </table>
                                    <div style="margin-bottom: 5px; text-align: left;">退费项目信息</div>
                                    <table class="table table-condensed table-hover">
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>项目编号</th>
                                                <th>项目名称</th>
                                                <th>单位</th>
                                                <th>单价</th>
                                                <th>数量</th>
                                                <th>退费数量</th>
                                                <th>合计金额</th>
                                                <th>退费金额</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <%for(var m = 0; m < data.pay[i].programs.length; m++) {%>
                                            <tr>
                                                <td><%=m+1%></td>
                                                <td><%=data.pay[i].programs[m].number%></td>
                                                <td><%=data.pay[i].programs[m].name%></td>
                                                <td><%=data.pay[i].programs[m].unit%></td>
                                                <td><%=data.pay[i].programs[m].money%></td>
                                                <td><%=data.pay[i].programs[m].num%></td>
                                                <td>
                                                    <input class="programOutNum<%=data.pay[i].programs[m].number%>" type="text" style="width: 40px" data-maxProgramNum="<%=data.pay[i].programs[m].num%>">
                                                </td>
                                                <td><%=data.pay[i].programs[m].totalMoney%></td>
                                                <td>
                                                    <input class="programOutMoney<%=data.pay[i].programs[m].number%>" type="text" style="width: 40px" data-maxProgramMoney="<%=data.pay[i].programs[m].totalMoney%>">
                                                </td>
                                                <td>
                                                    <button data-target="<%=data.pay[i].programs[m].number%>"class="btn btn-primary btn-sm btn-payOutMoney" data-payBianHao="<%=data.pay[i].payBianHao%>" data-programNumber="<%=data.pay[i].programs[m].number%>" >退费</button>
                                                </td>
                                            </tr>
                                            <%}%>
                                        </tbody>
                                    </table>
                               
                                <div class="modal-footer">
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                </td>
            </tr>
            <%}%>

        </tbody>
    </table>

</script>


<!-- 左 -->
<script type="text/template" id="myFormData">

    <%for(var i = 0; i < data.length; i++) {%>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <div class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                    href="#<%=i+1%>" aria-expanded="false" aria-controls="<%=i+1%>">
                    <span><%=data[i].father%></span>
                </div>
            </h4>
        </div>
        <div id="<%=i+1%>" class="panel-collapse collapse" role="tabpanel"
            aria-labelledby="headingTwo">
            <div class="panel-body" style="color: #337AB7">
                <%for(var j = 0; j < data[i].sun.length; j++) {%>
                    <div style="margin-top: 20px"><a href="<%=data[i].sun[j].url%>"><%=data[i].sun[j].name%></a></div>
                <%}%>
            </div>
        </div>
    </div>
<% } %>

</script>







<script>
    window.onload = function () {


        // 获取当前用户信息
        var actor = JSON.parse(localStorage.getItem('userMessage')).actor
        console.log(actor)

        // 左边菜单栏渲染
        getLeftCategory(function (res) {
            console.log(res)
            $('.panel-group').html(template('myFormData', {
                data: res
            }))
        }, actor)

        // 搜索按钮表单提交事件：
        $("#myFormSearch").submit(function (e) {
            e.preventDefault()
            // 获取表单提交内容
            var number = $('#searchNumber')[0].value.trim()
            var name = $('#searchName')[0].value.trim()
            console.log('输入的身份证号：' + number)
            console.log('输入的名字：' + name)
            if (!number && !name) {
                window.alert('身份证号和姓名不能同时为空！')
                return
            }
            // 向后端发送请求模糊搜索
            $.ajax({
                url: '/pages/patIn/getPatientMoHu',
                type: 'post',
                data: JSON.stringify({
                    number,
                    name
                }),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    console.log('后端返回模糊查询病人:')
                    console.log(res)
                    if (res.error) {
                        window.alert(res.error)
                    } else {
                        // 渲染动态病人信息
                        $('.patient-content').html(template('nameAndNumber', {
                            data: res
                        }))
                    }
                }
            })
        })

        // 根据病人身份证号和姓名查询账单信息的 按钮绑定事件
        $('.patient-content').on('click', '.nameAndNumber', function () {
            var name = this.getAttribute('data-name')
            var number = this.getAttribute('data-number')
            console.log(name)
            console.log(number)
            window.name = name
            console.log(name)
            $.ajax({
                url: '/pages/payOut/getPatientMessage',
                type: 'post',
                data: JSON.stringify({
                    name,
                    number
                }),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    console.log(res)
                    if (res.error) {
                        window.alert(res.error)
                    } else {
                        // 如果只有一个账单：
                        if (res.pay.length == 1) {
                            // 渲染显示用户的账单支付信息
                            $('.patient-content').html(template('onePayOut', {
                                data: res
                            }))
                        } else {
                            // 有很多个账单
                            $('.patient-content').html(template('manyPayOut', {
                                data: res
                            }))
                        }

                    }
                }

            })


        })


        // 账单退费退药按钮事件绑定
        $('.patient-content').on('click', '.btn-payOutPillMoney', function (e) {
            e.preventDefault()
            var pillNumber = this.getAttribute('data-pillNumber')
            var payBianHao = this.getAttribute('data-payBianHao')
            var target = this.getAttribute('data-target')
            var pillOutNum = $('.pillOutNum' + target)[0].value.trim()
            var pillOutMoney = $('.pillOutMoney' + target)[0].value.trim()
            var maxPillNum = $('.pillOutNum' + target)[0].getAttribute('data-maxPillNum')
            var maxPillMoney = $('.pillOutMoney' + target)[0].getAttribute('data-maxPillMoney')
            if (!pillOutNum) {
                window.alert('退药数量不能为空！')
                return
            }
            if (!pillOutMoney) {
                window.alert('退药钱数不能为空！')
                return
            }
            if (parseInt(pillOutNum) > parseInt(maxPillNum)) {
                window.alert('退费数量不能大于购买数量！')
                return
            }
            if (parseInt(pillOutMoney) > parseInt(maxPillMoney)) {
                window.alert('退费钱数不能大于购买钱数！')
                return
            }
            var that = this
            console.log('退费药品编号：' + pillNumber)
            console.log('账单编号：' + payBianHao)
            console.log('退费药品数量：' + pillOutNum)
            console.log('退费药品钱数：' + pillOutMoney)
            if (confirm("确认退费？")) {
                $.ajax({
                    url: '/pages/payOut/payOutPill',
                    type: 'post',
                    data: JSON.stringify({
                        name: window.name,
                        pillNumber,
                        payBianHao,
                        pillOutNum,
                        pillOutMoney
                    }),
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    success:  (res) => {
                        console.log(res)
                        if (res.success) {
                            window.alert('药品退费成功')
                            $(this).parent().parent().remove()

                        } else if (res.error) {
                            window.alert(res.error)
                        }
                    }
                })
            } else {
                return
            }
        })

        // 账单退费退项目按钮绑定
        $('.patient-content').on('click', '.btn-payOutMoney', function (e) {
            e.preventDefault()
            console.log(1)
            var programNumber = this.getAttribute('data-programNumber')
            var payBianHao = this.getAttribute('data-payBianHao')
            var target = this.getAttribute('data-target')
            var programOutNum = $('.programOutNum' + target)[0].value.trim()
            var programOutMoney = $('.programOutMoney' + target)[0].value.trim()
            var maxProgramNum = $('.programOutNum' + target)[0].getAttribute('data-maxProgramNum')
            var maxProgramMoney = $('.programOutMoney' + target)[0].getAttribute('data-maxProgramMoney')
            console.log('项目编号：' + programNumber)
            console.log('账单编号：' + payBianHao)
            console.log('退款项目数量：' + programOutNum)
            console.log('退款项目钱数：' + programOutMoney)
            console.log('最大退款数量：' + maxProgramNum)
            console.log('最大退款钱数：' + maxProgramMoney)
            if (!programOutNum) {
                window.alert('退款项目数量不能为空！')
                return
            }
            if (!programOutMoney) {
                window.alert('退款项目钱数不能为空！')
                return
            }
            if (parseInt(programOutNum) > parseInt(maxProgramNum)) {
                window.alert('退款项目数量不能大于购买数量！')
                return
            }
            if (parseInt(programOutMoney) > parseInt(maxProgramMoney)) {
                window.alert('退款项目钱数不能大于购买钱数！')
                return
            }
            // 退项目请求
            if (confirm("确认退费？")) {
                $.ajax({
                    url: '/pages/payOut/payOutProgram',
                    type: 'post',
                    data: JSON.stringify({
                        name: window.name,
                        programNumber,
                        payBianHao,
                        programOutNum,
                        programOutMoney
                    }),
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    success:  (res) => {
                        console.log(res)
                        if (res.success) {
                            window.alert('项目退费成功')
                            $(this).parent().parent().remove()
                        } else if (res.error) {
                            window.alert(res.error)
                        }
                    }
                    
                })
            } else {
                return
            }

        })
    }


    // 根据获取左边菜单栏函数封装
    function getLeftCategory(callback, actor) {
        $.ajax({
            url: '/pages/category/getAllCategoryAndSunCategoryByActor',
            type: 'post',
            data: JSON.stringify({
                actor
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }

        })
    }
</script>

<!-- <script src="js/common.js"></script> -->
<script src="lib/js/bootstrap-paginator.js"></script>
<script src="lib/js/template-native.js"></script>


<script src="lib/js/mock.js"></script>
<script src="mock/getCategoryByActor.js"></script>
<script src="mock/patientMessage.js"></script>
<script src="mock/payOutPatientMessage.js"></script>


</html>